<script setup>
import {onMounted, ref} from 'vue'
import request from "@/requests/request.js"

const tableData = ref([]);
// 分页
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(100);
const search = ref('');
const dialogVisible = ref(false);
const form = ref({});
// 判断是否编辑还是新增
const isEdit = ref(false);  // false为新增，true为编辑
// 提示文
const message = ref('');    // 提示信息
const Success = ref("success");  // 提示类型
const isSuccess = ref(false);    // 提示

function handleEdit(row) {
  console.log("handleEdit:", row);
  Edit(row);
}

function handleDelete(row) {
  console.log("handleDelete:" + row);
  Delete(row.id);
}

// 获取数据
let getData = async () => {
  let res = await request.get('/students', {
    params: {
      pageNum: currentPage.value,
      pageSize: pageSize.value,
      search: search.value
    }
  })
  console.log(res.data);
  tableData.value = res.data.records;
  total.value = res.data.total;
  console.log(res.data);
}


const handleSizeChange = (val) => {
  console.log(`${val} items per page`);
  pageSize.value = val;
  getData();
}

const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`);
  currentPage.value = val;
  getData();
}


// 初始化
onMounted(() => {
  getData();
})

const load = () => {
  getData();
}
const add = () => {
  isEdit.value = false;
  dialogVisible.value = true;
  form.value = {};
}

// 取消弹框按钮
const cancel = () => {
  dialogVisible.value = false;
  form.value = {};
  isEdit.value = false;
  isSuccess.value = false;
}

const sava = async () => {
  console.log(form.value);
  if (dialogVisible.value) {
    if (!isEdit.value) {
      // 新增
      let res = await request.post('/students', form.value);
      console.log(res);
      dialogVisible.value = false;
      isEdit.value = false;
      message.value = res.msg;
      // 如果code为0，则表示成功，将成功信息显示出来
      Success.value = res.code === "0" ? "success" : "error";
      load();
      isSuccess.value = true;
      setTimeout(() => {
        isSuccess.value = false;
      }, 5000);
    } else {
      // 编辑
      let Editres = await request.put('/students', form.value);
      console.log(Editres);
      dialogVisible.value = false;
      isEdit.value = false;
      message.value = Editres.msg;
      // 如果code为0，则表示成功，将成功信息显示出来
      Success.value = Editres.code === "0" ? "success" : "error";
      load();
      isSuccess.value = true;
      setTimeout(() => {
        isSuccess.value = false;
      }, 5000);
    }
  }
}

const Edit = (edit) => {
  isEdit.value = true;
  dialogVisible.value = true;
  form.value = edit;
}

const Delete = async (deleteId) => {
  console.log(deleteId);
  let res = await request.delete('/students/' + deleteId);
  console.log(res);
  message.value = res.msg;
  // 如果code为0，则表示成功，将成功信息显示出来
  Success.value = res.code === "0" ? "success" : "error";
  load();
  isSuccess.value = true;
  setTimeout(() => {
    isSuccess.value = false;
  }, 5000);
}

</script>

<template>
  <div class="home" style="padding: 50px;">
    <el-alert :title='message' :type='Success' center show-icon v-if="isSuccess"/>
    <!-- 搜索框 -->
    <div style="text-align: left;padding-right: 10px;margin-bottom: 10px">
      <el-input v-model="search" placeholder="请输入学生姓名" style="width: 20%;margin-right: 10px"
                clearable></el-input>
      <el-button type="primary" @click="load">搜索</el-button>
      <el-button type="success" @click="add">新增</el-button>
    </div>
    <el-table :data="tableData" stripe border style="width: 100%;">
      <el-table-column prop="id" label="编号" width="180"/>
      <el-table-column prop="studentName" label="学生姓名" width="180"/>
      <el-table-column prop="gender" label="性别"/>
      <el-table-column prop="age" label="年龄"/>
      <el-table-column prop="address" label="家庭地址"/>
      <el-table-column fixed="right" label="操作" width="150">
        <template #default="scope">
          <el-button type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
          <el-popconfirm title="确定要删除吗?" @confirm="handleDelete(scope.row)">
            <template #reference>
              <el-button type="danger" size="small">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                   :page-sizes="[5, 10, 15]" :small="small"
                   :disabled="disabled" :background="background"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="total"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
    />

    <el-dialog v-model="dialogVisible" title="编辑学生信息" width="60%">
      <el-form :model="form" label-width="120px">
        <el-form-item label="学生姓名">
          <el-input v-model="form.studentName" placeholder="请输入学生姓名"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio v-model="form.gender" label="男" size="large">男</el-radio>
          <el-radio v-model="form.gender" label="女" size="large">女</el-radio>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="form.age" placeholder="请输入年龄"></el-input>
        </el-form-item>
        <el-form-item label="家庭地址">
          <el-input v-model="form.address" placeholder="请输入家庭地址" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="sava">确 定</el-button>
        </span>
      </template>

    </el-dialog>
  </div>
</template>

<style scoped>

</style>